<template>
    <div class="establish">
        <div class="establishTop">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
                <el-form-item label="年级：" prop="gradeName">
                    <el-select v-model="ruleForm.gradeName" @change="changeGrade" placeholder="请选择年级">
                        <el-option
                            v-for="(item) in gradeOptions" 
                            :key="item.typeId"
                            :label="item.typeName" 
                            :value="item.typeId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学科：" prop="subject">
                    <el-select v-model="ruleForm.subject" @change="changeSubject" placeholder="请选择学科">
                        <el-option
                            v-for="(item) in subjectOptions" 
                            :key="item.typeId"
                            :label="item.typeName" 
                            :value="item.typeId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <div class="select">
                <p class="testQuestions">试题类型：</p>
                <ul>
                    <el-button 
                      :disabled="$route.params.isEdit !== '0'" 
                      v-for="(item,index) in type" 
                      :class="index+'' == selectIndex ? 'active' : ''" 
                      :key="index" 
                      @click="changeTab(item.componentId,index)"
                    >{{item.componentName}}</el-button>
                </ul>
            </div>
        </div>
        <div class="bottom">
            <keep-alive>
                <component 
                    :is="componentId" 
                    ref="child"
                    :gradeId="ruleForm.gradeName" 
                    :subjectId="ruleForm.subject"
                    :selectIndex="selectIndex"
                    :row="this.$route.params.row"
                    @submitForm="submitForm"
                    @resetForm="resetForm"
                ></component>
            </keep-alive>
        </div>
        <!-- <button @click="add">ssss</button> -->
    </div>
</template>

<script>
import {
    getGradeListApi,
    // getCourseListApi,
    // infoQuertionBankApi
    getQuertionBankListApi
} from "@/api/onlinehomework/questionbank.js"
import ShortAnswer from "./ShortAnswer.vue"
import SingleChoice from "./SingleChoice.vue"
import Filling from "./Filling.vue"
import Judge from "./Judge.vue"
import Multiple from "./Multiple.vue"
export default {
    name:'',
    data() {
        return {
            type:[
                {
                    componentName:'单选题',
                    componentId:SingleChoice,
                    id:'0'
                },
                {
                    componentName:'多选题',
                    componentId:Multiple,
                    id:'1'

                },
                {
                    componentName:'判断题',
                    componentId:Judge,
                    id:'2'
                },
                {
                    componentName:'填空题',
                    componentId:Filling,
                    id:'3'
                },
                {
                    componentName:'简答题',
                    componentId:ShortAnswer,
                    id:'4'
                }
            ],
            componentId:SingleChoice,
            selectIndex:0,
            ruleForm: {
                gradeName: '', // 年级名称
                subject: '', // 学科
            },
            rules: {
                gradeName: [
                    { required: true, message: '请选择年级', trigger: 'blur' },
                ],
                subject: [
                    { required: true, message: '请选择学科', trigger: 'blur' }
                ]
            },
            gradeOptions:[], // 年级下拉框
            subjectOptions:[],//  学科数据
        }
    },
    components:{
        ShortAnswer,
        SingleChoice
    },
    mounted() {
        console.log(this.$route.params);
        this.selectIndex = this.$route.params.tabIndex
        this.type.forEach(item=>{
          if(item.id == this.$route.params.tabIndex) {
            this.componentId = item.componentId
          }
        })
        // this.componentId = this.$route.params.tabIndex
        this.isDisabled = this.$route.params.isEdit
        getGradeListApi({parentId: 55}).then(res=>{
            console.log(res);
            this.gradeOptions = res.rows
        })
        getGradeListApi({parentId: 130}).then(res=>{
            console.log(res,'-----学科');
            this.subjectOptions = res.rows
            this.subjectOptions = this.subjectOptions.filter(item=>{
                return item.status == '0'
            })
        })
       if(this.$route.params.isEdit != 0) {
           console.log(123123123);
           this.setQuertionList()
       } 
        
    },
    methods:{
        setQuertionList() {
            console.log(this.$route.params);
            getQuertionBankListApi({pageSize:'10',pageNum:this.$route.params.currentPage}).then(res=>{
                var filterItem = res.rows.filter(item=>{
                    return item.questionsId == this.$route.params.row
                })
                console.log(filterItem[0]);
                // this.ruleForm = filterItem[0]
                getGradeListApi({parentId: 55}).then(res=>{
                    this.gradeOptions = res.rows
                    this.gradeOptions.forEach(item=>{

                        if(item.typeId == filterItem[0].grade) {
                            console.log(item);
                            this.ruleForm.gradeName = item.typeId
                        }
                    })
                })
                getGradeListApi({parentId: 130}).then(res=>{
                    console.log(res,'-----学科');
                    this.subjectOptions = res.rows
                    this.subjectOptions.forEach(item=>{
                        console.log(filterItem);
                        console.log(item);
                        // console.log(item,filterItem[0],'00000');
                        if(item.typeId == filterItem[0].subject) {
                            console.log(item);
                            this.ruleForm.subject = item.typeId
                        }
                    })
                })
            })
        },
        // 重置
        resetForm() {
            this.$refs['ruleForm1'].resetFields();
        },
        async changeIndex(index) {
            console.log(index);
            this.type.forEach((item)=>{
                console.log(item);
                if(item.id == index) {
                    console.log(index);
                    console.log(item);
                    this.componentId = item.componentId
                    this.selectIndex = index
                }
            })
        },
        // tab切换
        changeTab(com,index){
            console.log(index);
            console.log(com);
            this.componentId = com
            this.selectIndex = index
            this.ruleForm = {}
            if(this.$route.params.isEdit != '0') {
                this.setQuertionList()
            }
        },
        // 校验年级
        submitForm() {
            // console.log(this.$refs['ruleForm']);
            this.$refs['ruleForm1'].validate((v) => {
                console.log(v);
            })
        },
        changeGrade(val) {
            this.ruleForm.gradeName = val
        },
        changeSubject(val) {
            this.ruleForm.subject = val
        }
    }
}
</script>

<style lang="scss" scoped>
.establish{
    width: 100%;
    height: 100%;
    padding: 0 20px 20px 20px;
    min-width: 100vh;

    .establishTop{
        width: 100%;
        height: 200px;
        min-width: 100vh;
        background-color: #fff;
        padding: 10px 20px;
        border-radius:10px 10px 0 0;
        .select{
            display: flex;
            align-items: center;
            .testQuestions{
                width: 100px;
                font-size: 16px;
            }
            ul{
                width: 500px;
                height: 100%;
                display: flex;
                align-items: center;
                .active{
                    background-color: rgb(24, 144, 255);
                    color: #fff;
                }
                li{
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    margin-left: 15px;
                    text-align: center;
                    border-radius: 5px;
                    border: 1px solid  rgb(24, 144, 255);
                }
            }
        }
        
    }
    .bottom{
        width: 100%;
        height: 100%;
        background-color: #fff;
        // padding: 0 20px;
        border-radius: 0 0 10px 10px;
    }
}
</style>